<template>
  <div class="app-container home">
    <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
            <el-button
               type="success"
               plain
               icon="Plus"
               @click="handleAdd"
               v-hasPermi="['funConfig:cavityGroup:add']"
            >新增</el-button>
         </el-col>
         <el-col :span="1.5">
            <el-button
               type="danger"
               plain
               icon="Delete"
               :disabled="disabled"
               @click="handleDelete"
               v-hasPermi="['funConfig:cavityGroup:remove']"
            >删除</el-button>
         </el-col>
      </el-row>
    <t-ag-grid
      style="height: calc(100% - 35px);"
      align="center"
      header-align="center"
      :suppress-row-transform="true"
      :tooltipShowDelay="0"
      :columnDefs="column"
      :rowData="tableData"
      :defaultColDef = "{
        // suppressMenu:true
        menuTabs: ['filterMenuTab', 'columnsMenuTab']
      }"
      @selection-changed="selectionChanged"
    />

    <el-dialog v-model="openDialog" width="350" append-to-body :destroy-on-close="true">
      <el-form :model="formData" ref="queryRef" :inline="true" :rules="rules" label-width="90px">
        <!-- 父设备 -->
        <el-form-item label="父设备" prop="topEqp">
          <el-select v-model="formData.topEqp" @change="topEqpChange" style="width: 200px;">
              <el-option
                  v-for="item in topEqpOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
          </el-select>
        </el-form-item>

        <!-- 父设备基准 -->
        <el-form-item label="父设备基准" prop="topEqpSt">
          <el-input v-model='formData.topEqpSt' style="width: 200px;"/>
        </el-form-item>

        <!-- 腔体组 -->
        <el-form-item label="腔体组" prop="chamberGroup">
          <el-select v-model="formData.chamberGroup" style="width: 200px;">
              <el-option
                  v-for="item in chamberGroupOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
          </el-select>
        </el-form-item>

        <!-- 腔体列表 -->
        <el-form-item label="腔体列表" prop="chamberListchamberList">
          <el-select multiple
            clearable
            collapse-tags
            collapse-tags-tooltip v-model="formData.chamberListchamberList" style="width: 200px;">
              <el-option
                  v-for="dict in chamberListchamberListOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
              />
          </el-select>
        </el-form-item>

        <!-- 腔体组基准 -->
        <el-form-item label="腔体组基准" prop="chamberGroupSt">
          <el-input v-model="formData.chamberGroupSt" style="width: 200px;"/>
        </el-form-item>

        <!-- 腔体数 -->
        <el-form-item label="腔体数">
          <el-input v-model="formData.chamberTtl" :disabled="true" style="width: 200px;"/>
        </el-form-item>

      </el-form>
      <template #footer>
          <div class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancelForm">取 消</el-button>
          </div>
      </template>
  </el-dialog>
  </div>
</template>

<script setup name="CavityGroup">
  import { watch } from 'vue'
  import { column, queryTableData, addTableData, deleteTableData, checkFirst, checkSecond, getTopEqp, getChamberListchamberList, RecalculateEPR } from './config'
  const { proxy } = getCurrentInstance()

  const tableData = ref([])
  const openDialog = ref(false)
  const disabled = ref(true)
  const formData = reactive({
    topEqp: null, // 父设备
    topEqpSt: null, // 父设备基准
    chamberGroup: null, // 腔体组
    chamberListchamberList: null, // 腔体列表
    chamberGroupSt: null, // 腔体组基准
    chamberTtl: null // 腔体数
  })

  const rules = {
    topEqp: [
      { required: true, message: "父设备不能为空", trigger: "change" }
    ],
    topEqpSt: [
      { required: true, message: "父设备基准不能为空", trigger: "change" }
    ],
    chamberGroup: [
      { required: true, message: "腔体组不能为空", trigger: "change" }
    ],
    chamberListchamberList: [
      { required: true, message: "腔体列表不能为空", trigger: "change" }
    ],
    chamberGroupSt: [
      { required: true, message: "腔体组基准不能为空", trigger: "change" }
    ]
  }

  const topEqpOptions = ref([])
  const chamberGroupOptions = ref([
    { label: 'G1', value: 'G1' },
    { label: 'G2', value: 'G2' },
    { label: 'G3', value: 'G3' },
    { label: 'G4', value: 'G4' },
    { label: 'G5', value: 'G5' }
  ])
  const chamberListchamberListOptions = ref([])

  const _delTarget = ref([])

  const getList = () => {
    queryTableData({
      pageNum: 1,
      pageSize: 10000
    }).then((res) => {
      tableData.value = res.rows
    })
  }

  const selectionChanged = ({ api }) => {
    _delTarget.value = api.getSelectedRows()
  }

  const handleAdd = () => {
    // Object.keys(formData).forEach((key) => {
    //   formData[key] = null
    // })
    /* 重置查询条件 */
    formData.topEqp = null,
    formData.topEqpSt = null,
    formData.chamberGroup = null,
    formData.chamberListchamberList = null,
    formData.chamberGroupSt = null,
    formData.chamberTtl = null

    openDialog.value = true
  }

  const handleDelete = () => {
    proxy.$modal.confirm('是否确认删除父设备"' + _delTarget.value[0].topEqp + '"的数据项？').then(function () {
      return deleteTableData({
        topEqp: _delTarget.value[0].topEqp,
        chamberGroup: _delTarget.value[0].chamberGroup
      })
    }).then(() => {
      getList()
      RecalculateEPR()
      _delTarget.value = []
      proxy.$modal.msgSuccess("删除成功")
    }).catch(() => { })
  }

  const submitForm = () => {
    proxy.$refs.queryRef.validate(valid => { // 表单校验
      if (valid) {
        checkFirst({
          topEqp: formData.topEqp,
          chamberGroup: formData.chamberGroup
        }).then((res) => {
          if(res?.data){
            proxy.$modal.confirm('该设备腔体组名存在重复注册ID', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
          } else {
            // 进行第二次校验。。。
            checkSecond({
              // chamberListchamberList: formData.chamberListchamberList
              chamberListchamberList: formData.chamberListchamberList.join(',').replace(/;/g, ",")
            }).then((res) => {
              if(res.data.length){
                proxy.$modal.confirm('该腔体组名的列表存在重复设备ID', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                })
              } else {
                formData.chamberListchamberList = formData.chamberListchamberList.join(',').replace(/,/g, ";")
                addTableData(formData).then((res) => {
                  openDialog.value = false
                  getList()
                  RecalculateEPR()
                })
              }
            })
          }
        })
      }
    })

    // addTableData({
    //   topEqp: 'H05-DWHJ00', // 父设备
    //   topEqpSt: '66.6', // 父设备基准
    //   chamberGroup: 'G2', // 腔体组
    //   chamberListchamberList: 'H05-DW-DPSJ06-4', // 腔体列表
    //   chamberGroupSt: '6.66', // 腔体组基准
    //   chamberTtl: '3' // 腔体数
    // }).then((res) => {
    //   openDialog.value = false
    //   getList()
    // })
  }

  const cancelForm = () => {
    openDialog.value = false
  }

  watch(() => _delTarget.value, (val) => {
    disabled.value = val.length ? false : true
  })

  /* 根据腔体列表 动态计算腔体数 */
  watch(() => formData.chamberListchamberList, (val) => {
    formData.chamberTtl = val?.length
  })

  /* 获取父设备 options */
  getTopEqp().then((res) => {
    res.rows.forEach((item) => {
      topEqpOptions.value.push({
        label: item,
        value: item
      })
    })
  })

  /* 级联获取 腔体列表 */
  const topEqpChange = (val) => {
    getChamberListchamberList({
      machineGroupIds: val
    }).then((res) => {
      chamberListchamberListOptions.value = []
      res.rows.forEach((item) => {
        chamberListchamberListOptions.value.push({
          label: item,
          value: item
        })
      })
    })
  }

  getList()

</script>